<template>
  <div class="swiper">
    <el-carousel
      ref="carousel"
      class="el_carousel"
      indicator-position="none"
      arrow="never"
      @change="changeCarousel"
    >
      <el-carousel-item
        class="el_carousel_item"
        v-for="(item, index) in imageList"
        :key="`carousel_${index}`"
      >
        <nuxt-link :to="`/news/${item.id}`">
        <li-image
          :src="$getLogo(item.photograph)"
          class="img"
          :lazy-load="false"
        />
      </nuxt-link>
      </el-carousel-item>
    </el-carousel>
    <div class="dot_list">
      <nuxt-link :to="`/news/${current.id}`" class="desc_box" :title="current.articleName||''">{{ current.articleName }}</nuxt-link>
      <div class="dot_box">
        <span
          :class="carouselIndex == index ? 'active' : ''"
          v-for="(item, index) in imageList"
          :key="`dot_${index}`"
          @click="chooseCarousel(index)"
        ></span>
      </div>
    </div>
  </div>
</template>
<script>
import { Carousel, CarouselItem } from "element-ui";
export default {
  name: "SimpleCarousel",
  components: {
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem,
  },
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  watch: {
    list: {
      handler: function (n) {
        console.log(n);
        this.imageList = n || [];
        this.current = n[0]||{}
      },
      immediate: true,
    },
  },
  data() {
    return {
      imageList: [],
      carouselIndex: 0,
      current:{}
    };
  },
  methods: {
    // 监听轮播图切换
    changeCarousel(e) {
      this.carouselIndex = e;
    },

    // 手动切换轮播图
    chooseCarousel(e) {
      this.carouselIndex = e;
      this.current = this.imageList[e]||{}
      this.$refs.carousel.setActiveItem(e);
    },
  },
};
</script>
<style lang="less" scoped>
@import "./carousel.less";
</style>